<template>
  <div id="blog" class="dashu_scrollbar" v-loading="loading">
    <div class="blog_div">
      <div class="blog_div_list" v-for="item in content" :key="item">
        <!-- 图片 -->
        <div class="blog_div_list_div blog_div_list_img" @click="infoBlog(item)">
          <img :src="item.imgs" width="100%" height="100%"/>
        </div>
        <!-- 内容 -->
        <div class="blog_div_list_div blog_div_list_blog" @click="infoBlog(item)">
          <div class="blog_item_title" :title="item.title">{{item.title}}</div>
          <div class="blog_item_content">
            &nbsp;&nbsp;&nbsp;&nbsp;{{item.content | removeHTML}}
          </div>
        </div>
        <!-- 分享 -->
        <div class="blog_div_list_div blog_div_list_share">
          <div class="blog_item_info">
            <div class="blog_item_head_div">
              <img class="blog_item_head" :src="item.headImg">
            </div>
            <div class="blog_item_head_info">
              <div>
                <span style="font-weight:700;">author：</span>
                <span style="font-size: 16px;font-weight:700;">{{item.nickName}}</span>
              </div>
              <div>
                <span style="font-weight:700;">time：</span>
                <span style="font-size: 13px;font-weight:700;">{{item.createTime | toTime}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <div v-show="!info" class="blog_serach">
      <div style="margin-top: 10px;width: 500px;margin-left: 50px;">
        <el-input placeholder="输入要搜索的内容" v-model="pageInfo.str" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="serache"></el-button>
        </el-input>
      </div>
    </div>
    <!-- 加载 -->
    <div v-show="!loading" @click="loadMore()" class="blog_loadPage">
      <el-tooltip content="点这里加载更多" placement="left">
        <img width="30" src="../../../../static/img/downLoad.png"/>
      </el-tooltip>
    </div>
    <!-- 置顶 -->
    <div v-show="!loading" @click="topPage()" class="blog_top">
      <el-tooltip content="点这里可以置顶" placement="left">
        <img width="30" src="../../../../static/img/up.png"/>
      </el-tooltip>
    </div>
    <transition name="fade">
      <info v-show="info" :info="info" @infoColse="infoColse"></info>
    </transition>
  </div>
</template>

<script type="application/ecmascript-6">
import Info from "./info";

export default {
  name: "blog",
  data() {
    return {
      content: [],
      pageInfo: {
        pageNow: 1,
        pageSize: 10,
        type: 3,
        str: ""
      },
      info: null,
      loading: true,
      bottomLoading: false
    };
  },
  components: {
    Info
  },
  methods: {
    ajaxData: function(load, down) {
      this.$http
        .get("/api/index", {
          params: this.pageInfo
        })
        .then(
          response => {
            if (response.body.code == 1) {
              this.$notify({ message: response.body.msg });
              this.$router.push("/home");
              return;
            }
            if (load) {
              this.content = this.content.concat(response.body.data.content);
            } else {
              this.content = response.body.data.content;
            }
            this.loading = false;
            this.pageInfo.pageNow = this.pageInfo.pageNow + 1;
            if (response.body.data.numberOfElements != 0) {
              if (down) {
                return;
              }
              this.$notify({
                message:
                  "为您找到 " + response.body.data.totalElements + " 条数据"
              });
            } else {
              this.$notify({ message: "没有更多的数据了，很抱歉" });
            }
          },
          error => {
            this.$notify({
              message:
                "程序异常:" + JSON.stringify(error.status) + "，请联系管理员"
            });
            this.$route.push("/home");
          }
        );
    },
    infoBlog: function(item) {
      this.info = item;
    },
    infoColse: function(type) {
      console.log(type);
      this.info = null;
    },
    serache: function() {
      this.pageInfo.pageNow = 1;
      this.loading = true;
      this.ajaxData(false, false);
    },
    loadMore: function() {
      this.ajaxData(true, true);
    },
    topPage: function() {
      document.getElementById("blog").scrollTop = 0;
    }
  },
  filters: {
    removeHTML: function(str) {
      return str
        .replace("<div>", "")
        .replace("</div>", "")
        .replace("<p>", "")
        .replace("</p>", "")
        .replace(/&nbsp;/gi, " ")
        .replace(/&quot;/gi, "")
        .replace(/&gt;/gi, ">")
        .replace(/&lt;/gi, "<")
        .replace(/<\/?[^>]*>/g, "");
    },
    toTime: function(time) {
      var today = new Date(time);
      return today.Format("yyyy-MM-dd");
    }
  },
  created() {
    this.ajaxData(true, false);
  }
};
</script>

<style lang="stylus" rel="stylesgeet/stylus" >
#blog
  OVERFLOW-Y: auto
  OVERFLOW-X: hidden
  height:100vh
  .blog_serach
    position:fixed
    top:0
    width:80%
    height:60px
    background-color:#fff
    z-index:10
    box-shadow:0 0 10px;
  .blog_loadPage,.blog_top
     right:30px
     background-color:#fff
     width:30px
     height:30px
     position:absolute
  .blog_loadPage
    bottom:80px
  .blog_top
    bottom:130px
  .blog_loadPage,.blog_top:hover
    cursor:pointer
  .blog_div
  	display: flex
  	flex-flow: column wrap
  	padding-top:60px
  	.blog_div_list
  	  display: flex
  	  flex-flow: row wrap
  	  flex:1;
  	  min-width:300px
  	  min-height:300px
  	  max-height:300px
  	  background-color:#fff
  	  border-bottom:1px #000 solid
  	  .blog_div_list_img
  	    flex:2
  	    background-size:cover
  	    overflow: hidden
  	  .blog_div_list_share
  	    flex:1
  	    background-color: #EDE06B;
  	  .blog_div_list_blog
  	    flex:3
  	    padding-left:20px
  	    padding-right:20px
  	    max-width:500px
  	    min-width:300px
  	  .blog_item_title
        width:100%
        font-size:20px
        font-weight: 600
        margin-top:30px
        overflow: hidden
        text-overflow:ellipsis
        white-space: nowrap
        height: 25px
      .blog_item_title:hover
        cursor:pointer
      .blog_item_info
        margin-top:10px
        .blog_item_head
          width:50px;
          height:50px;
          border-radius:25px;
          vertical-align:middle;
        .blog_item_head_div,.blog_item_head_info
          width:100%
          text-align: center
        .blog_item_head_info
          margin-top:50px
          div:nth-child(n+2)
            margin-top:10px
        .blog_item_head_div
          margin-top:50px
  	  .blog_item_content
        display: -webkit-box
        -webkit-box-orient: vertical
        -webkit-line-clamp: 6
        overflow: hidden
        margin-top:20px
        line-height:28px
  .bottom_load
  	width:100%
  	height:40px
  	background-color:#fff
  	text-align: center
  	line-height: 40px
  .fade-enter-active,.fade-leave-active
    transition: all .5s
  .fade-enter,.fade-leave-to
    opacity: 0
</style>
